{extend name="public:base" }
{block name="body"}
<pjax>
    <style>
        .photoadd{background:#fff;}
        .settings {padding:20px 20px 0;position:relative;z-index:301;margin-bottom:30px;height:30px;}
        .settings .setting-album {float:left;}
        .settings .setting-raw {line-height:30px;float:right;}
        .global-media-40 #uploader .filelist li {width:169px;}
        .queueList {margin:0 20px 10px;}
        .queueList p {font-size:14px;height:36px;line-height:36px;}
        .placeholder {border:3px dashed #e6e6e6;color:#cccccc;font-size:18px;min-height:247px;padding:75px 0;position:relative;text-align:center;}
        .placeholder .fa-image{display: block;font-size:64px;}
        .filelist {display:none;list-style:outside none none;margin:0;min-height:346px;overflow:hidden;padding:0;width:101%;}
        .filelist::after {clear:both;content:"";display:block;height:0;overflow:hidden;width:0;}
        .filelist li {display:inline;float:left;font-size:12px;height:201px;margin:0 13px 13px 0;overflow:hidden;position:relative;text-align:center;width:176px;}
        .filelist li img {height:100%;}
        .filelist li p.title{height:24px;left:0;overflow:hidden;position:absolute;text-align:left;text-indent:5px;text-overflow:ellipsis;top:5px;white-space:nowrap;width:176px;z-index:2;}
        .filelist li p.imgWrap{height:176px;line-height:109px;overflow:hidden;position:relative;transform-origin:50% 50% 0;transition:transform 200ms ease-out 0s;vertical-align:middle;width:176px;z-index:3;margin:0;}
        .filelist li p.progress{margin:0;bottom:25px;height:8px;left:0;overflow:hidden;position:absolute;width:100%;z-index:50;}
        .filelist li p.progress span {animation:2s linear 0s normal none infinite running progressmove;background:#1483d8;display:none;height:100%;overflow:hidden;transition:width 200ms linear 0s;width:0;}
        .filelist li .desc-wrapper {background:#ffffff;height:25px;}
        .filelist li .desc-wrapper input {border:1px solid #dadada;color:#666666;cursor:pointer;font-size:14px;height:23px;line-height:23px;outline:0 none;overflow:hidden;padding:0 6px;width:162px;}
        .global-media-40 #uploader .filelist li .desc-wrapper input {width:155px;}
        .filelist div.file-panel {background:rgba(0, 0, 0, 0.5);-moz-user-select:none;height:0;left:0;position:absolute;top:0;width:100%;z-index:300;}
        .filelist div.file-panel span {cursor:pointer;float:right;height:24px;margin:5px 1px 1px;width:24px;font-size:18px;color:#fff;}
        
        .element-invisible {clip:rect(1px, 1px, 1px, 1px);position:absolute !important;}

        .statusBar {border-top:1px solid #dadada;height:63px;line-height:63px;padding:0 20px;position:relative;vertical-align:middle;}
        .statusBar .info {color:#666666;display:inline-block;font-size:14px;}
        .statusBar .btns {line-height:40px;-moz-user-select:none;position:absolute;right:20px;top:10px;}
        .progress {background:#ffffff;border:1px solid #1483d8;color:#6dbfff;display:inline-block;height:18px;line-height:20px;margin-right:10px;position:relative;text-align:center;width:198px;}
        .progress span.text {position:relative;z-index:10;}
        .progress span.percentage {background:#1483d8;height:100%;left:0;position:absolute;top:0;transition:width 200ms ease-out 0s;width:0;}
        .webuploader-element-invisible {position:absolute !important;clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip:rect(1px,1px,1px,1px);}
        .webuploader-container {position: relative;}
        .webuploader-pick {
            font-size: 18px;
            background: #00b7ee;
            border-radius: 3px;
            line-height: 44px;
            padding: 0 30px;
            color: #fff;
            display: inline-block;
            margin: 0 auto 20px auto;
            cursor: pointer;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
    </style>
	<article class="entry-content" style="min-height:500px;">
		{gt name="Think.session.uid" value="1"}
			<div class="photoadd">
				<div class="settings html5-setting">
					<div class="setting-album">
						<label>选择相册：</label>
						<div style="width:100px;display:inline-block;">
						<select id="PhotoCateId">
							<option value="-1">默认相册</option>
							{data:list name="Category" function="getList" var="var" module="Photo" status="1" order="id asc" limit="all"}
								{volist name="var.list" id="cvo"}
								<option value="{$cvo.id}">{$cvo.title}</option>
								{/volist}
							{/data:list}
						</select>
						</div>
						<span>或<a href="#" id="new-album">创建新的相册</a></span>
					</div>
					<div class="setting-raw">
						<label>图片质量：</label>
						<label><input type="radio" checked="checked" name="pic-quality" value="1" id="q-low">高清压缩图</label>
						<label><input type="radio" name="pic-quality" value="0" id="q-high">原图</label>
					</div>
				</div>
				<div class="cf"></div>
				<div class="flash">
					<div class="html5-uploader" id="uploader">
						<div class="queueList">
							<div class="placeholder">
								<i class="fa fa-image"></i>
								<div id="filePicker">
									<div class="webuploader-pick">点击选择图片</div>
								</div>
								<p id="upload_tip">单次最多可选 300 张</p>
							</div>
							<ul style="display:none;" class="filelist"></ul>
						</div>
						<div id="statusBar" class="statusBar element-invisible">
							<div style="display:none;" class="progress">
								<span class="text">0%</span>
								<span style="width:0%;" class="percentage"></span>
							</div>
							<div class="info">共0张(0B)，已上传0张</div>
							<div class="btns">
								<div id="filePicker2" class="btn">
									<div class="webuploader-pick">继续添加</div>
								</div>
								<div class="btn submit uploadBtn state-pedding">开始上传</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		{/gt}
	</article>
	<script type="text/javascript">
        $('#page').addClass('danlie');
	</script>
</pjax>
{/block}
{block name="side"}
{/block}